'use client'
import Link from 'next/link';
import classNames from 'classnames';
import { EffectFade } from 'swiper/modules';
import { StaticImageData } from 'next/image';
import Button from 'react-bootstrap/esm/Button';
import { useEffect, useRef, useState } from 'react';
import BannerImage1 from '@/app/assets/images/banner1.jpg';
import BannerImage2 from '@/app/assets/images/banner5.jpg';
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react'
import styles from './index.module.css'

import 'swiper/css';
import 'swiper/css/effect-fade';


interface IBannerItem {
  src: StaticImageData,
  path: string
}

const bannerList: IBannerItem[] = [
  {
    src: BannerImage1,
    path: '/pages/productIntro/lims'
  },
  {
    src: BannerImage2,
    path: '/pages/productIntro/carbon'
  }
]


const DashBoardBanner = () => {
  const wraper = useRef<SwiperClass>();
  const timer = useRef<NodeJS.Timeout>();
  const [activedIndex, setActivedIndex] = useState(0);

  useEffect(() => {
    playAuto();
    return () => {
      clearInterval(timer.current);
    }
  }, [])

  /** 自动播放 */
  function playAuto() {
    timer.current = setInterval(function () {
      const activeIndex = wraper.current?.activeIndex || 0;
      let count = activeIndex < bannerList.length-1 ? activeIndex + 1 : 0;
      trunPage(count);
    }, 10000);
  }

  function trunPage(index: number) {
    setActivedIndex(index);
    wraper.current?.slideToLoop(index);
  }

  function onNextEvent() {
    let count = activedIndex < bannerList.length-1 ? activedIndex + 1 : 0;
    trunPage(count);
  }

  function onPrevEvent() {
    let count = activedIndex == 0 ? bannerList.length - 1 : activedIndex - 1;
    trunPage(count);
  }

  /** 渲染banner图 */
  function renderSwiperItem(item: IBannerItem, index: number) {

    // 是否为双碳页
    const isCarbon = item.src.src.includes('banner5');

    return (
      <SwiperSlide key={index} className='flex justify-center items-center'>
        <Link href={item.path} className='block min-h-[800px] bg-no-repeat bg-inherit bg-top bg-cover relative cursor-pointer' 
        style={{backgroundImage: `url(${item.src.src}) `}}>
          {
            isCarbon && (
              <div className='absolute left-0 top-[200px] w-full'>
                <div className='text-[72px] font-[500] text-center text-white mb-[200px]'>首厚低碳 <span className='ml-8 mr-8'></span> 双碳服务</div>
                <div className='flex justify-around text-[36px] w-[1440px] m-auto text-white'>
                  <div>1. 双碳咨询</div>
                  <div>2. 碳资产开发</div>
                  <div>3. 合同能源管理</div>
                </div>
              </div>
            )
          }
        </Link>
      </SwiperSlide>
    )
  }

  return (
    <Swiper 
    loop={true}
    effect='fade'
    modules={[EffectFade]} 
    className={styles.swiperWraper}
    onSwiper={(swiper) => {
      wraper.current = swiper;
    }}
    >
      {
        bannerList.map((item, index) => renderSwiperItem(item, index))
      }
      <Button className='absolute right-2.5 top-1/2 z-1' variant="secondary" size="lg" onClick={onNextEvent}>
        <i className='iconfont icon-jiantou text-current' />
      </Button>
      <Button className='absolute left-2.5 top-1/2 z-1' variant="secondary" size="lg" onClick={onPrevEvent}>
        <i className='iconfont icon-fanhui text-current' />
      </Button>

      <div className='absolute bottom-2.5 left-1/2 z-1 flex items-center space-x-3'>
        {
          bannerList.map((__, index) => <span key={index} 
          onClick={() => trunPage(index)}
          className={classNames('flex w-[20px] h-1 cursor-pointer', {
            'bg-sky-500': activedIndex === index,
            'bg-white': activedIndex !== index
          })
          }></span>)
        }
      </div>
    </Swiper>
  )
}

export default DashBoardBanner